<template>
  <a-card>
    <div style="height: 30px">
      <a-button type="primary" style="float: right" @click="addType"
        >新增</a-button
      >
    </div>
    <addType ref="addType" @reload="reload"></addType>
    <div style="height: 10px"></div>
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <span slot="imageUrl" slot-scope="row" style="cursor:pointer;">
        <img v-if="row.imageUrl" :src="FORM_ACTION.globalUrl + row.imageUrl" width="20" height="20" @click="getImg(row.imageUrl)" />
      </span>
      <span slot="createTime" slot-scope="row" >
           {{ row.createTime }}
      </span>
      <span slot="nameType" slot-scope="row">{{ row.nameType }}</span>
      <template slot="action" slot-scope="text, record">
        <a-button size="small" type="danger" @click="del(record)"
          >删除</a-button
        >
      </template>
    </a-table>
     <a-modal v-model="visible" title="图标" @ok="handleOk" style="text-align:center;">
          <img :src="imgurl" width="100%" height="auto">
    </a-modal>
  </a-card>
</template>

<script>
const columns = [
  //   {
  //     title: "序号",

  //   },
  {
    title: "图标",
    ellipsis: true,
    scopedSlots: { customRender: "imageUrl" },
  },
  {
    title: "类型名称",
    key: "typeName",
    ellipsis: true,
    scopedSlots: { customRender: "nameType" },
  },
  {
    title: "创建时间",
    key: "createTime",
    ellipsis: true,
    scopedSlots: { customRender: "createTime" },
  },
  {
    title: "操作",
    key: "action",
    ellipsis: true,
    scopedSlots: { customRender: "action" },
  },
];
import addType from "./addType";
import { mainMixin } from "@/mixins/main";
export default {
  components: {
    addType,
  },
  mixins: [mainMixin],
  data() {
    return {
      form: {
        pageVo: {
          pageNumber: 1,
          pageSize: 10,
        },
      },
      loading: false,
      columns: columns,
      dataList: [],
      url: "/rapid/newsType/getPage",
      visible:false,
      imgurl:''
    };
  },
  created() {
    this.getList();
  },
  methods: {
    addType() {
      this.$refs.addType.show();
    },
    reload() {
      this.form = {
        pageVo: {
          pageNumber: 1,
          pageSize: 10,
        },
      };
      this.ipagination.current = 1;
      this.ipagination.pageSize = 10;
      this.getList();
    },
    getImg(url){
     this.visible = true;
     this.imgurl = this.FORM_ACTION.globalUrl + url;
    },
    handleOk(){
      this.visible = false;
    },
    del(col) {
      console.log(col);
      let _this = this;
      let params = { id: col.id };
      this.$confirm({
        title: "确认删除",
        content: "是否删除选中数据?",
        onOk: function () {
          _this.loading = true;
          const { id } = col.id;
          _this
            .$http("/rapid/newsType/delete", params)
            .then((res) => {
              if (res.code === 200) {
                _this.$message.info("操作成功");
                _this.getList();
              } else {
                _this.$message.warning(res.message);
              }
            })
            .finally(() => {
              _this.loading = false;
            });
        },
      });
    },
  },
};
</script>

<style>
</style>